<template>
  <div>
    <a-card title="销售单详情">
      <a-button slot="extra" type="primary" style="margin-right: 8px;" ghost v-print="'#printContent'"> <a-icon type="printer" />打印</a-button>
      <a-button slot="extra" type="primary" ghost @click="() => { this.$router.go(-1); }"> <a-icon type="left" />返回</a-button>
      <section id="printContent">
        <a-spin :spinning="loading">
          <img id="barcode" style="float: right" />
          <a-descriptions bordered>
            <a-descriptions-item label="销售编号">
              {{ info.number }}
            </a-descriptions-item>
            <a-descriptions-item label="销售单号">
              {{ info.sales_order }}
            </a-descriptions-item>
            <a-descriptions-item label="供应商">
              {{ info.supplier_name }}
            </a-descriptions-item>
            <a-descriptions-item label="仓库">
              {{ info.warehouse_name }}
            </a-descriptions-item>
            <a-descriptions-item label="经手人">
              {{ info.handler_name }}
            </a-descriptions-item>
            <a-descriptions-item label="处理日期">
              {{ info.handle_time }}
            </a-descriptions-item>
            <a-descriptions-item label="其他费用">
              {{ info.other_amount }}
            </a-descriptions-item>
            <a-descriptions-item label="备注">
              {{ info.remark }}
            </a-descriptions-item>
          </a-descriptions>
          <!-- <a-divider orientation="left" style="margin-top: 30px;">结算账户信息</a-divider>
          <a-table
            rowKey="id"
            size="middle"
            :columns="columnsAccount"
            :data-source="info.sales_account_items"
            :pagination="false" /> -->
          <a-divider orientation="left" style="margin-top: 30px;">产品信息</a-divider>
          <a-table
            bordered
            rowKey="id"
            size="middle"
            :columns="columns"
            :data-source="info.sales_goods_items"
            :pagination="false" />
        </a-spin>
      </section>
    </a-card>
  </div>
</template>

<script>
  import { saleOrderDetail } from '@/api/sale'
  import JsBarcode from 'jsbarcode'

export default {
    data() {
      return {
        loading: false,
        materialLoading: false,
        receiptOrder: undefined,
        info: {},
        columns: [
          {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            width: 45,
            customRender: (value, item, index) => {
              return item.isTotal ? '合计' : (index + 1)
            },
          },
          {
            title: '商品名称',
            dataIndex: 'goods_name',
            key: 'goods_name',
            width: 60,
          },
        {
          title: "规格",
          dataIndex: "guige",
          key: "guige",
          width: 60,
          align:'center',
        },
        {
          title: "尺寸",
          dataIndex: "chicun",
          key: "chicun",
          width: 40,
          align:'center',
          scopedSlots: { customRender: "chicun" },
        },
        {
          title: "弧长",
          dataIndex: "huchang",
          key: "huchang",
          width: 40,
          align:'center',
          scopedSlots: { customRender: "huchang" },
        },
        {
          title: "材料费",
          dataIndex: "clf",
          key: "clf",
          align:'center',
          children:[
            {
          title: "数量",
          dataIndex: "clsl",
          key: "clsl",
          width: 40,
          align:'center',
          scopedSlots: { customRender: "clsl" },
        },
        {
          title: "单价",
          dataIndex: "cldj",
          key: "cldj",
          width: 40,
          align:'center',
          scopedSlots: { customRender: "cldj" },
        },
        {
          title: "金额",
          dataIndex: "clAmount",
          key: "clAmount",
          width: 40,
          align:'center',
          customRender: (value, item) => {
            if (item.isTotal) return value;
            value = NP.times(item.clsl, item.cldj);
            return item.id ? NP.round(value, 2) : "";
          },
        },
          ],
        },
                {
          title: "加工费",
          dataIndex: "jgf",
          key: "jgf",
          align:'center',
          children:[
            {
          title: "数量",
          dataIndex: "jgsl",
          key: "jgsl",
          width: 40,
          align:'center',
          scopedSlots: { customRender: "jgsl" },
        },
        {
          title: "单价",
          dataIndex: "jgdj",
          key: "jgdj",
          width: 40,
          align:'center',
          scopedSlots: { customRender: "jgdj" },
        },
        {
          title: "金额",
          dataIndex: "jgAmount",
          key: "jgAmount",
          width: 40,
          align:'center',
          customRender: (value, item) => {
            if (item.isTotal) return value;
            value = NP.times(item.jgsl, item.jgdj);
            return item.id ? NP.round(value, 2) : "";
          },
        },
          ]
        },
        {
          title: "总金额",
          dataIndex: "totalAmount",
          key: "totalAmount",
          width: 60,
          align:'center',
          customRender: (value, item) => {
            if (item.isTotal) return value;
            value = NP.times(item.clsl, item.cldj)+
            NP.times(item.jgsl, item.jgdj);
            // value =item.clAmount+item.jgAmount;
            return item.id ? NP.round(value, 2) : "";
          },
        }
        ],
        columnsAccount: [
          {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            width: 45,
            customRender: (value, item, index) => {
              return item.isTotal ? '合计' : (index + 1)
            },
          },
          {
            title: '结算账户',
            dataIndex: 'account_name',
            key: 'account_name',
            width: 200,
          },
          {
            title: '付款金额',
            dataIndex: 'collection_amount',
            key: 'collection_amount',
            width: 200,
          }
        ],
      }
    },
    created(){
      this.initData();
    },
    methods: {
      getJsBarcode(number) {
        JsBarcode("#barcode", number, {
          lineColor: '#000',
          width: 2,
          height: 40,
          displayValue: true
        });
      },
      initData() {
        this.loading = true;
        saleOrderDetail({ id: this.$route.query.id }).then(data => {
          this.info = data;
          this.info.sales_account_items = [
            ...this.info.sales_account_items,
            {
              id: '-1',
              isTotal: true,
              collection_amount: this.info.collection_amount,
            },
          ];
          this.info.sales_goods_items = [
            ...this.info.sales_goods_items,
            {
              id: '-1',
              isTotal: true,
              sales_quantity: this.info.total_quantity,
              totalAmount: this.info.total_amount,
            },
          ];
          this.getJsBarcode(data.number)
        }).finally(() => {
          this.loading = false;
        });
      },
    },
    mounted() {
      this.initData();
    },
  }
</script>
<style>
</style>
